<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>我的伙伴</title>
		<link rel="stylesheet" th:href="@{/css/jquery.mobile-1.4.5.min.css }"/>
		<script th:src="@{/js/jquery.min.js}"></script>
		<script th:src="@{/js/jquery.mobile-1.4.5.min.js}"></script>
		<link rel="stylesheet" th:href="@{/css/iconfont.css}"/>
		<style>
			.line1{
			    width: 98%;
			    overflow: hidden;
			    border-bottom:1px solid #aaa ;
			    padding-left: 2%;
			    margin-top: 10px;
			}
			.line2{
			    width: 98%;
			    overflow: hidden;
			    border-bottom:1px solid #aaa ;
			    padding-left: 2%;
			    margin-top: 10px;
			}
			.line3{
			    width: 98%;
			    overflow: hidden;
			    border-bottom:1px solid #aaa ;
			    padding-left: 2%;
			    margin-top: 10px;
			}
			.line4{
			    width: 98%;
			    overflow: hidden;
			    border-bottom:1px solid #aaa ;
			    padding-left: 2%;
			    margin-top: 10px;
			}
			.line1 img{
				float: left;
				padding-top:15px;
			}
			.line1 input{
				float: left;
				width:85%;
				height: 35px;
				border: none;
				padding-left: 3%;
				line-height: 2.4rem;
				font-size: 1.2rem;
				outline: none;
				color: #4d4d4d;
				background: none;
			 }
			 .line2 img{
			 	float: left;
			 	padding-top:15px;
			 }
			 .line2 input{
			 	float: left;
			 	width:85%;
			 	height: 35px;
			 	border: none;
			 	padding-left: 3%;
			 	line-height: 2.4rem;
			 	font-size: 1.2rem;
			 	outline: none;
			 	color: #4d4d4d;
			 	background: none;
			  }
			  .line3 img{
			  	float: left;
			  	padding-top:15px;
			  }
			  .line3 input{
			  	float: left;
			  	width:85%;
			  	height: 35px;
			  	border: none;
			  	padding-left: 3%;
			  	line-height: 2.4rem;
			  	font-size: 1.2rem;
			  	outline: none;
			  	color: #4d4d4d;
			  	background: none;
			   }
			   .line4 img{
			   	float: left;
			   	padding-top:15px;
			   }
			   .line4 input{
			   	float: left;
			   	width:85%;
			   	height: 35px;
			   	border: none;
			   	padding-left: 3%;
			   	line-height: 2.4rem;
			   	font-size: 1.2rem;
			   	outline: none;
			   	color: #4d4d4d;
			   	background: none;
			    }
				.register{
			   		width: 70%;
			   		display:block;margin:0 auto;
			   		margin-top: 20px;
			   }
		</style>
		<script>
			function checkUserid(){
				var userid = $("#userid").val();
				console.log(userid);
				var data1={"userid":userid};
				$.post("/UserController/CheckUserid",data1, function (result) {
					if(result == "no"){
						console.log("失败");
						$("#useridExist").popup('open');
					}else{
						console.log("可以的");
					}
				});
				// $.ajax({
				// 	url: "http://localhost:8080/Partners/UserController/CheckUserid",
				// 	type: "POST",
				// 	data : {"userid" : userid },
				// 	dataType: "text",
				// 	async: true,
				// 	success : function(data) {
				// 		console.log(data);
				// 		if(data == "no"){
				// 			console.log("失败");
				// 			$("#useridExist").popup('open');
				// 			$("#userid").val("");
				//
				// 		}else{
				// 			console.log("可以的");
				// 		}
				// 		},
				// 	error:function(){
				// 	        console.log("系统异常");
				// 	    }
				// 	});
					
			}
			function register(){
				var userid = $("#userid").val();
				var pwd = $("#userpwd").val();
				var name = $("#name").val();
				var repwd = $("#repwd").val();
				var reg=/^\d{3,6}$/;
				if(userid==""||pwd==""||name==""||repwd==""){
					$("#haveNull").popup('open');
				}else if((!reg.test(userid))){
					$("#zhanghaoError").popup('open');
				}
				else if(repwd!=pwd){
					$("#re").popup('open');
				}else{
					$.post("/UserController/registerUser",$("#registerForm").serialize(), function (result) {
						if(result == "success"){
							window.location = "/ViewController/toLogin";
						}else{
							console.log("注册失败");
						}
					});
				}	
			}
			function close1(){
				$("#zhanghaoError").popup('close');
			}
			function close2(){
				$("#haveNull").popup('close');
			}
			function close3(){
				$("#useridExist").popup('close');
				$("#userid").val("");
			}
			function close4(){
				$("#re").popup('close');
				$("#userpwd").val("");
				$("#repwd").val("");
			}
		</script>
	</head>
	<body>
		<div data-role = "page">
			<div data-role = "header"  data-fullscreen = "true">
				<a href="/ViewController/toLogin" data-icon = "back"  data-ajax = "false">返回</a>
				<h1>注册新用户</h1>
			</div>
			<div data-role = "content">
				<form id="registerForm">
				<div class="line1">
					<img src="/image/user.png" />
					<input type="text" name="userid" id="userid" placeholder="3-6位纯数字账号" onchange="checkUserid()"/>
				</div>
				<div class="line2">
					<img src="/image/name.png" />
					<input type="text" name="name" id="name" placeholder="昵称"/>
				</div>
				<div class="line3">
					<img src="/image/lock.png" />
					<input type="password" name="userpwd" id="userpwd" placeholder="密码"/>
				</div>
				<div class="line4">
					<img src="/image/repwd.png" />
					<input type="password" name="repwd" id="repwd" placeholder="重复密码"/>
				</div>
				<a href="" data-ajax = "false" data-role = "button" class="register" id="register" onclick="register()">注册</a>
				</form>
				<div data-role = "popup" id="zhanghaoError" class="ui-content">
					<a href="#" data-role = "button" data-icon = "delete" data-iconpos = "notext" class="ui-btn-right" onclick="close1()">Close</a>
					<div>账号不符合要求</div>
				</div>
				<div data-role = "popup" id="haveNull" class="ui-content">
					<a href="#" data-role = "button" data-icon = "delete" data-iconpos = "notext" class="ui-btn-right" onclick="close2()">Close</a>
					<div>请填入完整的数据再进行注册操作</div>
				</div>
				<div data-role = "popup" id="useridExist" class="ui-content">
					<a href="#" data-role = "button" data-icon = "delete" data-iconpos = "notext" class="ui-btn-right" onclick="close3()">Close</a>
					<div>您输入的账号已存在，请重新输入</div>
				</div>
				<div data-role = "popup" id="re" class="ui-content">
					<a href="#" data-role = "button" data-icon = "delete" data-iconpos = "notext" class="ui-btn-right" onclick="close4()">Close</a>
					<div>两次输入的密码不相同，请重新输入</div>
				</div>
			</div>
		</div>
	</body>
</html>
